<!--
 * @Author: liyir
 * @Date: 2021-07-13 08:41:05
 * @LastEditTime: 2021-07-13 17:43:06
 * @LastEditors: rendc
 * @Description: 
 * 可以输入预定的版权声明、个性签名、空行等
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/details.css">
    <link rel="stylesheet" href="css/fengcai.css">
    <script src="jquery-2.0.1.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>学生风采</title>
</head>
<body>
<div id="fengcai">
         <!-- 头部 -->
    <div class="header">
      <el-popover placement="top-start" title="提示" width="200" trigger="hover" content="点击此处，返回首页。">
        <div slot="reference" class="headLeft">
          <div class="logo" title="返回首页" @click="toIndex()">
            行学天下
          </div>
          <div class="title" title="返回首页" @click="toIndex()">
            行学天下
          </div>
        </div>
      </el-popover>
        <div class="headRight">
          <div class="callMe">
            <a href="#callMe">
              <img src="image/callMe.png" alt="图片丢失了">
              致电我们
            </a>
          </div>
        </div>
      </div>
 

    <!-- {{articleDetails}} -->
    <div class="main">
        <div class="title">{{articleDetails.title}}</div>
          <div class="date">{{formatDate(articleDetails.publishTime)}}</div>
          <!-- <div class="name">{{articleDetails.baseUser.realname}}</div> -->
          <div class="like">{{articleDetails.thumpUp}}</div>
        <div class="details" v-html="articleDetails.content">
        <!-- {{htmlToText(articleDetails.content)}} -->
        </div>
           
        <div class="toIndex">
          <div class="myBtn" @click="toIndex">点击此处返回首页</div>
          <el-button plain type="primary" @click="toIndex">点击此处返回首页</el-button>
        </div>
        <!-- 返回顶部 -->
        <el-backtop :bottom=200></el-backtop>
      </div>
     <!--页面底部信息-->
     <div class="footer">
        <div id="callMe" class="callMe">
           联系我们（工作时间：8:00-18:30）
           400-500-6000
           <a href="http://www.sxau.edu.cn">http://www.sxau.edu.cn</a>
           <a target="_blank" href="http://bruip.cn">在线客服</a> 
           <div class="beiAn">
             <a href="http://beian.miit.gov.cn">京ICP备123456789号</a>
             <a href="http://www.beian.gov.cn/portal/regisiterSystemInfo">公安备案号00000000</a>
           </div>
           <div class="callMe">
            ©1999-2021&nbsp;SXAU&nbsp;liyir
           </div>
        </div>
    </div>
</div>    
</body>
<script>
    new Vue({
        el:'#fengcai',
        data:{
            articleDetails:[],
        },
        created(){
            var id = window.location.search.split('=')[1];
            console.log(id);
            axios.get('http://47.94.46.113:8888/index/article/findById?id=' + id).then((res) => {
                console.log(res)
                this.articleDetails = res.data.data
            })      
        },
        methods: {
        // 将时间戳格式化
        formatDate(date) {
        return moment(date).format('YYYY-MM-DD')
        },
        
        //将html转话成正常文本
        htmlToText(html){
            return html.replace(new RegExp('<.+?>','g'),'')
        },
        toIndex(){
          window.location.href='index.html'
        }
        },
      })
</script>
</html>
